<template>
    <!-- logo和搜索框 -->
    <LogoAndSearch></LogoAndSearch>

    <!-- 顶部信息栏 -->
    <TopInfo></TopInfo>
   

    <!-- 导航菜单栏 -->
    <NavMenu></NavMenu>

    <!-- 走马灯 -->
    <el-carousel height="450px" style="position: relative;top:70px ;">
        <el-carousel-item v-for="item in carouseData" :key="item">
            <img :src="item.url" style="float: left;" />
        </el-carousel-item>
    </el-carousel>

    <!-- 查询卡片 -->
    <QueryCard></QueryCard>

    <!-- 底部栏 -->
    <img src="../assets/friend.png" style="position: absolute;bottom: 0px;left: 0px;height: 21%;width: 100%;">
</template>

<script setup lang="ts">

import { ref } from 'vue'


import QueryCard from '../components/home/QueryCard.vue'
import NavMenu from '../components/home/NavMenu.vue'
import TopInfo from '../components/home/TopInfo.vue'
import LogoAndSearch from '../components/home/LogoAndSearch.vue'
// import { useRouter } from 'vue-router'

// const router = useRouter()

// import { storeToRefs } from 'pinia'

// import { useTopinfoStore } from '../stores/topinfo'


// const topinfoStore = useTopinfoStore()

// let { username, show } = storeToRefs(topinfoStore)



let carouseData = ref([
    { url: new URL('../assets/goupiao.jpg', import.meta.url).href },
    { url: new URL('../assets/canyin.jpg', import.meta.url).href },
    { url: new URL('../assets/baoxian.jpg', import.meta.url).href },
    { url: new URL('../assets/shoupiao.jpg', import.meta.url).href },
    { url: new URL('../assets/huiyuan.jpg', import.meta.url).href },
    { url: new URL('../assets/jiangxi.jpg', import.meta.url).href },

])

</script>

<style scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>